import { View, StyleSheet } from "react-native";
import React from "react";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";

import Icon from "react-native-vector-icons/FontAwesome";

import Home from "./Home/Home";
import My from "./My/My";
import Message from "./Message/Message";

const Tab = createBottomTabNavigator();

export default function Index() {
  return (
    <Tab.Navigator
      sceneContainerStyle={globalStyles.screenContainer}
      initialRouteName="Home"
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          let iconName = "";
          if (route.name == "Home") {
            iconName = focused ? "home" : "home";
          }
          if (route.name == "Message") {
            iconName = focused ? "github-alt" : "github-alt";
          }
          if (route.name == "My") {
            iconName = focused ? "user" : "user";
          }

          return <Icon name={iconName} size={size} color={color} />;
        },
        tabBarActiveTintColor: "#333",
        tabBarInactiveTintColor: "gray",
        tabBarStyle: {
          borderTopWidth: 0,
        },
      })}
    >
      <Tab.Screen
        name="Home"
        options={{
          tabBarLabel: "首页",
          headerShown: false,
        }}
        component={Home}
      />
      <Tab.Screen
        name="Message"
        options={{
          tabBarLabel: "消息",
          headerTitle: "消息",
          headerTitleStyle: {
            fontSize: 16,
            color: "#333",
          },
        }}
        component={Message}
      />
      <Tab.Screen
        name="My"
        options={{
          headerShown: false,
          tabBarLabel: "我的",
        }}
        component={My}
      />
    </Tab.Navigator>
  );
}

const globalStyles = StyleSheet.create({
  screenContainer: {
    paddingHorizontal: 0,
    paddingTop: 0,
    borderBottomWidth: 0,
    backgroundColor: "#fff",
  },
});
